<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户登录页</title>

    <!-- js片段 -->
    <!-- jquery文件 -->
    <script src="/js/jquery-3.7.1.min.js"></script>

    <!-- css片段 -->
    <!-- 1.最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 2.bootstraptable文件 -->
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">
    <!-- 3.自己的css文件 -->
    <link rel="stylesheet" href="/css/list.css">

    <style>
        b {
            font-weight: bolder;
            color: red;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="panel panel-heading">
            <div class="panel-heading">学生信息表系统账号登录</div>
            <div class="panel-body">
                <form>
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                    <button type="button" class="btn btn-success" onclick="login();">登录</button>
                </form>
            </div>
        </div>
    </div>

    <!-- js片段 -->
    <!-- 1.自己写的list.js文件 -->
    <script type="text/javascript" src="/pagejs/student/list.js"></script>
    <!-- 2.最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <!-- 3.bootstraptable文件 -->
    <script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
    <script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- 4.jqvalidate文件 -->
    <script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
    <script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>
    <!-- 5.自己写的js -->
    <script>
        // 表单验证
        $().ready(function () {
            // - 设置表单验证规则和提示
            $("#formStudent").validate({
                debug: true, // 不提交表单
                rules: {
                    no: {// 学号
                        required: true,
                        minlength: 10,
                        maxlength: 10
                    },
                    name: {
                        required: true,
                        minlength: 2
                    },
                    age: {
                        required: true,
                        min: 16,
                        max: 30
                    },
                    score: {
                        required: true,
                        range: [0, 100]
                    },
                },
                messages: {
                    no: {
                        required: "请输入学生学号",
                        minlength: "学生学号必须由10个数字组成"
                    },
                    name: {
                        required: "请输入学生姓名",
                        minlength: "学生姓名必须至少由两个字符组成"
                    },
                    age: {
                        required: "请输入学生年龄",
                        min: "学生年龄不能小于 16 ",
                        max: "学生年龄不能大于 30 "
                    },
                    score: {
                        required: "请输入学生成绩",
                        min: "学生年龄不能小于 16 ",
                        range: "学生成绩不能在0-100之外"
                    }

                }
            });
            // - 清空表单验证信息和表单数据
            $("#addButton").click(function () {
                $("#formStudent").validate().resetForm();
                $("#formStudent")[0].reset();
            });
        })

        // 查询学生信息
        function searchStudent() {
            var op = document.getElementById("searchOp").value;
            var content = document.getElementById("InputName").value;
            $("#students").bootstrapTable('refresh', { url: "/webapi/student/getby" + op + "/" + content });
        }

        // 更改“保存”按钮的函数
        function changeFun() {
            var element = document.getElementById("saveButton");
            element.setAttribute("onclick", "addStudent()");
        }

        // 编辑学生信息
        function editStudent(id) {
            // - 清空表单验证信息和表单数据
            $(function () {
                $("#formStudent").validate().resetForm();
                $("#formStudent")[0].reset();
            });
            $("#myModal").modal('show');
            $.ajax({
                url: "/webapi/student/get/" + id,
                type: "get"
            }).done(function (rs) {
                $("#id").val(rs.id);
                $("#no").val(rs.no);
                $("#name").val(rs.name);
                $("#password").val("");
                $("#sex").val(rs.sex);
                $("#age").val(rs.age);
                $("#score").val(rs.score);
            })
            // 更改“保存”按钮的函数
            var element = document.getElementById("saveButton");
            element.setAttribute("onclick", "updateStudent()");
        }

        // 保存编辑后的学生信息
        function updateStudent() {
            var data = $("#formStudent").serialize();
            $.ajax({
                url: "/webapi/student/update/",
                method: "post",
                data: data
            }).done(function () {
                // 刷新table里面的数据
                $("#students").bootstrapTable('refresh', { url: "/webapi/student/list" });
                $('#myModal').modal('hide');
            })
        }

        // 删除学生信息
        function deleteStudent(id) {
            if (confirm("是否真的要删除!")) {
                $.ajax({
                    url: "/webapi/student/delete/" + id,
                    method: "delete",
                }).done(function () {
                    $("#students").bootstrapTable('refresh', { url: "/webapi/student/list" });
                })
            }

        }

        // 新增学生信息
        function addStudent() {
            var data = $("#formStudent").serialize();

            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function () {
                $("#students").bootstrapTable('refresh', { url: "/webapi/student/list" });
                $('#myModal').modal('hide')
            })
        }

        // 登录
        function login() {
            var name = $("#username").val();
            var password = $("#password").val();

            $.ajax({
                url: "/webapi/login/user",
                data: {
                    username: name,
                    password: password
                }
            }).done(function (rs) {
                if (rs >= 0) {
                    window.location.href = "/student/ajaxlist";
                } else {
                    alert("用户名或密码不正确，请重新输入！");
                }
            });
        }
    </script>
</body>

</html>